<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>好又多超市报货表</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
            padding: 20px 15px;
            font-size: 18px;
            max-width: 100%;
            overflow-x: hidden;
        }
        .container {
            background: white;
            border-radius: 15px;
            padding: 25px 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        h1 {
            text-align: center;
            color: #e53935;
            font-size: 26px;
            margin-bottom: 25px;
            font-weight: bold;
        }
        .product-list {
            margin-bottom: 30px;
        }
        .product-item {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px dashed #ddd;
        }
        .product-name {
            flex: 1;
            font-size: 22px;
            font-weight: 500;
        }
        .product-quantity {
            width: 100px;
        }
        .product-quantity input {
            width: 100%;
            padding: 12px 15px;
            font-size: 22px;
            border: 2px solid #4CAF50;
            border-radius: 8px;
            text-align: center;
        }
        .add-product {
            margin-bottom: 25px;
            text-align: center;
        }
        .add-btn {
            background-color: #FF9800;
            color: white;
            border: none;
            padding: 15px 25px;
            font-size: 22px;
            border-radius: 8px;
            cursor: pointer;
            width: 100%;
            font-weight: bold;
        }
        .generate-btn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 20px;
            font-size: 24px;
            border-radius: 10px;
            cursor: pointer;
            width: 100%;
            font-weight: bold;
            margin-top: 15px;
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.7);
            z-index: 100;
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background-color: white;
            padding: 30px;
            border-radius: 15px;
            width: 85%;
            max-width: 400px;
            text-align: center;
        }
        .modal-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
        }
        .modal-btn {
            padding: 15px 25px;
            font-size: 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
        }
        .modal-confirm {
            background-color: #4CAF50;
            color: white;
        }
        .modal-cancel {
            background-color: #f44336;
            color: white;
        }
        .output-area {
            display: none;
            background-color: #fffde7;
            padding: 25px;
            border-radius: 15px;
            border: 2px solid #ffd600;
            margin-top: 25px;
            white-space: pre-line;
            font-size: 20px;
            line-height: 1.8;
        }
        .copy-btn {
            background-color: #2196F3;
            color: white;
            border: none;
            padding: 15px;
            font-size: 20px;
            border-radius: 8px;
            cursor: pointer;
            width: 100%;
            margin-top: 20px;
            font-weight: bold;
        }
        .delete-btn {
            background-color: #ff4444;
            color: white;
            border: none;
            padding: 8px 12px;
            font-size: 18px;
            border-radius: 6px;
            cursor: pointer;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>好又多超市报货表</h1>
        
        <div class="product-list" id="productList">
            <!-- 产品列表将由JavaScript动态生成 -->
        </div>
        
        <div class="add-product">
            <button class="add-btn" onclick="addNewProduct()">＋ 添加新产品</button>
        </div>
        
        <button class="generate-btn" onclick="validateBeforeGenerate()">生成报货单</button>
        
        <div class="output-area" id="outputArea">
            <!-- 生成的内容将显示在这里 -->
        </div>
        
        <button class="copy-btn" onclick="copyToWechat()" id="copyBtn" style="display: none;">复制到微信</button>
    </div>
    
    <div class="modal" id="confirmModal">
        <div class="modal-content">
            <p id="modalMessage" style="font-size: 22px; margin-bottom: 20px;"></p>
            <div class="modal-buttons">
                <button class="modal-btn modal-cancel" onclick="cancelGenerate()">取消</button>
                <button class="modal-btn modal-confirm" onclick="confirmGenerate()">确认</button>
            </div>
        </div>
    </div>

    <script>
        // 初始产品列表
        const initialProducts = [
            "小餐包", "牛奶白包", "牛奶椰香", "豆沙餐包", "提子餐包", 
            "椰香餐包", "全麦方包", "白方包", "抹茶方包", "香芋方包", 
            "蔓越莓吐司片", "红豆粒吐司", "黄金条", "虎皮蛋糕", "肉松蛋糕", 
            "肉松小贝", "鸡蛋糕", "三明治", "泡芙", "蓝莓", 
            "沙拉热狗", "熊掌"
        ];
        
        // 当前产品列表
        let products = [...initialProducts];
        
        // 保存产品数量的对象
        let productQuantities = {};
        
        // 初始化页面
        function initializePage() {
            const productList = document.getElementById('productList');
            productList.innerHTML = '';
            
            // 保存当前所有输入的值
            saveCurrentQuantities();
            
            products.forEach((product, index) => {
                const productItem = document.createElement('div');
                productItem.className = 'product-item';
                
                // 获取保存的数量值，如果没有则为空
                const savedValue = productQuantities[product] || '';
                
                productItem.innerHTML = `
                    <div class="product-name">${index + 1}. ${product}</div>
                    <div class="product-quantity">
                        <input type="number" min="0" id="product-${index}" value="${savedValue}" placeholder="0" 
                               oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                    </div>
                    <button class="delete-btn" onclick="deleteProduct(${index})">删除</button>
                `;
                productList.appendChild(productItem);
            });
        }
        
        // 保存当前所有产品的数量
        function saveCurrentQuantities() {
            products.forEach((product, index) => {
                const inputElement = document.getElementById(`product-${index}`);
                if (inputElement) {
                    productQuantities[product] = inputElement.value;
                }
            });
        }
        
        // 添加新产品
        function addNewProduct() {
            const newProduct = prompt("请输入新产品名称：");
            if (newProduct && newProduct.trim()) {
                const productName = newProduct.trim();
                
                // 检查是否已存在同名产品
                if (products.includes(productName)) {
                    alert("该产品已存在！");
                    return;
                }
                
                // 保存当前数量
                saveCurrentQuantities();
                
                // 添加新产品
                products.push(productName);
                
                // 初始化新产品的数量为空
                productQuantities[productName] = '';
                
                // 重新渲染列表
                initializePage();
            }
        }
        
        // 删除产品
        function deleteProduct(index) {
            if (confirm("确定要删除这个产品吗？")) {
                // 保存当前数量
                saveCurrentQuantities();
                
                // 从数组中删除产品
                const deletedProduct = products[index];
                products.splice(index, 1);
                
                // 从数量对象中删除对应产品的数量
                delete productQuantities[deletedProduct];
                
                // 重新渲染列表
                initializePage();
            }
        }
        
        // 生成前验证
        function validateBeforeGenerate() {
            const filledProducts = [];
            const emptyProducts = [];
            
            products.forEach((product, index) => {
                const quantity = document.getElementById(`product-${index}`).value;
                if (quantity && quantity !== '0') {
                    filledProducts.push({ product, quantity });
                } else {
                    emptyProducts.push(product);
                }
            });
            
            if (filledProducts.length === 0) {
                alert("请至少填写一个产品的数量！");
                return;
            }
            
            if (emptyProducts.length > 0) {
                document.getElementById('modalMessage').textContent = 
                    `有 ${emptyProducts.length} 个产品未填写数量（如：${emptyProducts.slice(0, 3).join('、')}等），是否确认生成？`;
                document.getElementById('confirmModal').style.display = 'flex';
            } else {
                generateOutput();
            }
        }
        
        // 取消生成
        function cancelGenerate() {
            document.getElementById('confirmModal').style.display = 'none';
        }
        
        // 确认生成
        function confirmGenerate() {
            document.getElementById('confirmModal').style.display = 'none';
            generateOutput();
        }
        
        // 生成输出内容
        function generateOutput() {
            const filledProducts = [];
            
            products.forEach((product, index) => {
                const quantity = document.getElementById(`product-${index}`).value;
                if (quantity && quantity !== '0') {
                    filledProducts.push({ product, quantity });
                }
            });
            
            const now = new Date();
            const dateStr = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
            
            let output = `${dateStr}\n好又多超市\n\n报货清单：\n`;
            
            filledProducts.forEach(item => {
                output += `${item.product} ×${item.quantity}\n`;
            });
            
            const outputArea = document.getElementById('outputArea');
            outputArea.textContent = output;
            outputArea.style.display = 'block';
            
            document.getElementById('copyBtn').style.display = 'block';
            
            // 滚动到输出区域
            outputArea.scrollIntoView({ behavior: 'smooth' });
        }
        
        // 复制到微信
        function copyToWechat() {
            const outputText = document.getElementById('outputArea').textContent;
            
            // 创建临时文本区域进行复制
            const tempTextArea = document.createElement('textarea');
            tempTextArea.value = outputText;
            document.body.appendChild(tempTextArea);
            tempTextArea.select();
            
            try {
                const successful = document.execCommand('copy');
                if (successful) {
                    alert("报货单已复制！您现在可以直接粘贴到微信中。");
                } else {
                    alert("复制失败，请手动选择文本并复制。");
                }
            } catch (err) {
                alert("复制操作不支持，请手动选择文本并复制。");
            }
            
            document.body.removeChild(tempTextArea);
        }
        
        // 页面加载时初始化
        window.onload = initializePage;
    </script>
</body>
</html>